<template>
    <div class="editor-box">
        <div>
            <textarea id="mytextarea">
            {{ value }}
        </textarea>
        </div>
        <p>
            <el-button type="primary" @click="handlesubmitFn">提交</el-button>
        </p>

    </div>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'editorsubmit',
    data() {
        return {
            value: '<p><em>Hello</em>, <span style="text-decoration: underline;"><strong>World!</strong></span></p>'
        };
    },
    mounted() {
        // console.log(111);
        tinymce.init({
            selector: 'textarea#mytextarea',
            branding: false, // 不显示右下角的文字
            plugins: 'advlist link image lists paste', // 使用插件
            paste_data_images: true, // 支持图片粘贴
            theme: 'modern', //设置主题
            // theme: "inlite",
            // inline: true

        });
    },
    methods: {
        handlesubmitFn() {
            // 获取内容的方式
            console.log(tinymce.activeEditor.getContent())
        }
    }

})

</script>
<style lang="scss" scoped>
.editor-box {
    width: 100%;
    height: 100%;
    margin: 20px 0;
}

#mytextarea {
    width: 80%;
    height: 500px,
}

.tox-tinymce-aux {
    z-index: 709826033 !important;
}
</style>